<template>
	<view class="personal">
		<!-- 头像姓名区 -->
		<view class="hander">
			<!-- 登录状态 -->
			<template v-if="personList.nickName">
				<u-avatar :src="personList.avatarUrl" size='60'></u-avatar>
				<text class="text">{{personList.nickName}}</text>
				<view class="btn"><u-button type="primary" text="退出登录" plain shape='circle' @click="escLogin" size='normal'></u-button></view>
			</template>
			<!-- 未登录 -->
			<template v-else>
				
					<u-avatar src="/static/images/personal/personal.png" size='60'></u-avatar>
					<view class="btn"><u-button type="primary" text="去登录吧" plain shape='circle' @click="goLogin" size='normal'></u-button></view>
					
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				personList:{}
			}
		},
		methods: {
			goLogin(){
				uni.reLaunch({
					url:'../Login/Login'
				})
			},
			escLogin(){
				// #ifdef MP-WEIXIN
				 wx.setStorage({
					 key:'userInfo',
					 data:'',
				 })
				 this.goLogin()
				// #endif
			}
		},
		mounted() {
			// #ifdef MP-WEIXIN
			 wx.getStorage({
				 key:'userInfo',
				 success:(res)=>{
					 this.personList = JSON.parse(res.data)
				 }
			 })
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	.personal{
		.hander{
			width: 100%;
			height: 300rpx;
			background-color: #eed7b5;
			display: flex;
			align-items: center;
			padding-left: 40rpx;
			// justify-content: center;
			.btn{
				margin-left: 20rpx;
				width: 150rpx;
			}
			.text{
				margin-left: 20rpx;
			}
		}
	}
</style>
